<template>
    <div class="login">
        <!-- logo和背景图片区域 -->
        <Logo></Logo>
        <!-- 手机号码和登录密码 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                
                 <!-- 手机号码输入框 -->
                 <img class="icon_phone" src="@/assets/img/icon_phone.png" alt="">
                <van-field
                    v-model="loginData.mobile"
                    name="mobile"
                    placeholder="请输入手机号码"
                    :rules="[{ validator: validatorPhone }]"
                />

                <!-- 密码输入框 -->
                <img class="icon_lock" src="@/assets/img/icon_lock@2x.png" alt="">
                <van-field
                    v-model="loginData.password"
                    name="password"
                    placeholder="请输入密码"
                    :rules="[{ validator: validatorPassword }]"
                    type="password"
                />
                <div class="forget" @click="forgetPassword">忘记密码？</div>
            </van-cell-group>
            <!-- 注册按钮 -->
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                登录
                </van-button>
            </div>       
        </van-form>
    </div>
</template>

<script setup>
   // 引入组件 
    import Logo from './loginComponents/logo.vue'

    // 引入composition API
    import { reactive } from 'vue';
    import { useRouter } from 'vue-router'
    import useLoginStore from '@/store/login'
    import { Login } from '@/api'
    import { showDialog} from 'vant';
    import { setLocalToken } from '@/utils/token'
    const router = useRouter();
    const LoginStore = useLoginStore()

    // 双向绑定手机号与密码
    let loginData = reactive({
      mobile : null,
      password : null,
    })

     // 校验函数可以直接返回一段错误提示
     //校验手机号
     const validatorPhone = (val) => {
      if(!val){
        return '手机号码不能为空'
      }else if(!LoginStore.reg_phone.test(val)){
        return `${val} 不合规,请重新输入11位手机号码`;
      }
    }
    // 校验密码
    const validatorPassword = (val) => {
      if(!val){
        return '密码不能为空'
      }else if(!LoginStore.reg_password.test(val)){
        return `密码不合规,请输入6~16位数字加字母`;
      }
    }
    const onSubmit = async(values) => {
      //向接口发送登录请求
      const res = await Login(values)
      console.log(res)
      if(res.code == 200){
        setLocalToken(res.user.token)
        LoginStore.setUserMessage(res.user.id,res.user.username,res.user.mobile);
        router.replace('/preload')
      }else{
        showDialog({
        title: '请重新输入',
        message: `${res.msg}`,
        })
      }
    };


    // 忘记密码实现路由跳转到重置密码界面
    const forgetPassword = () => {
      router.push('/resetPassword');
    }
</script>

<style scoped>
 .login{
    display: flex;
    align-items: center;
    flex-direction: column;
    /* justify-content: space-between; */
  }
  /* 整个输入框盒子的样式 */
  :deep(.van-cell-group--inset){
   width: 337px;
   position: relative;
   margin-top: 50px;
  }
  :deep(.van-cell){
    border-bottom: 2px solid rgb(238, 238, 238);
    padding-bottom: 4px;
    line-height: 40px;
    position: relative;
  }
  /* 每个输入框的样式 */
  :deep(.van-field__control ){
    padding-top: 10px;
    height: 40px;
    padding-left: 50px;
    font-size: 18px;
  }
  /* 按钮样式 */
  :deep(.van-button--round){
    background-color:#FF8094 ;
    border: none;
    width: 300px;
    margin: auto;
    margin-top: 80px;
  }
  /* 错误信息样式 */
  :deep(.van-field__error-message){
    position:fixed;
    /* top: 40px;
    left:40px; */
    z-index: 200;
    left: 80px;
  }
  .icon_phone{
    width: 12px;
    z-index: 10;
    position: absolute;
    top: 24px;
    left: 8px;
  }
  .icon_lock{
    width: 19px;
    z-index: 10;
    position: absolute;
    top: 80px;
    left:5px
  }
  .forget{
    width: 60px;
    height: 16px;
    color: #FF8094;
    font-size: 11px;
    float: right;
    margin-top: 10px;
  }
</style>